<template>
  <!-- Vue3组件中的模板结构可以没有根标签 -->
  <!-- 一个人的信息 -->
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>性别：{{sex}}</h2>
  <h2>a的值是：{{a}}</h2>
  <button @click="sayHello">说话(vue3的 sayHello)</button>
  <hr>
  <hr>
  <button @click="sayWelcome">说话(vue2的 sayWelcome)</button>
  <hr>
  <hr>
  <button @click="test1">测试一下在Vue2的配置中区读取Vue3中的数据、方法</button>
  <hr>
  <hr>
  <button @click="test2">测试一下在Vue3的setup配置中区读取Vue2中的数据、方法</button>
</template>

<script>
  // import { h } from 'vue';

  export default {
    name: 'App',
    data() {
      return {
        sex: '男',
        a: 100
      }
    },
    methods: {
      sayWelcome() {
        alert('欢迎拉到尚硅谷学习Vue3!');
      },
      test1() {
        console.log(this.name);
        console.log(this.age);
        console.log(this.sex);
        console.log(this.sayHello);
      }
    },

    // setup 配置项不省略写法
    // setup:function() {

    // }

    // setup 配置项省略写法 
    // 组件中所用到的：数据、方法等等，均要配置在setup中。
    setup() {
      // 此处只是测试一下setup，暂时不考虑响应式的问题。

      // 数据
      let name = '张三';
      let age = 28;
      let a = 200;

      // 方法
      function sayHello() {
        alert(`我叫${name}，我${age}岁了，你好啊！！！`);
      }

      function test2() {
        console.log(this.name);
        console.log(this.age);
        console.log(this.sex);
        console.log(this.sayWelcome);
      }

      // 返回一个对象，常用
      // 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
      return {
        name: name,
        age: age,
        sayHello: sayHello,
        a,
        test2,
      }

      // return () => h('h1', '尚硅谷');
    }
  }
</script>